<template>
    <view>
        <uni-card :is-shadow="false" title="" v-for="(item,index) in lists" :key="index" @click.native="readone(item)">
            <template slot="title">
                <view class="header">
                    <view class="left">
                        <view class="red" v-if="item.is_read == 0"></view>
                        <view>{{item.title}}</view>
                    </view>
                    <view class="right">
                        <uni-icons type="right" size="18"></uni-icons>
                    </view>
                </view>
            </template>
            <text class="uni-body">{{item.content}}</text>
            <view solt="actions">
                <view class="actions">
                    {{item.add_time}}
                </view>
            </view>
        </uni-card>
    </view>
</template>

<script>
export default{
    name:"msglist",
    data(){
        return{
            lists:[],
            page:1,
            last_page:1,
        }
    },
    onPullDownRefresh(){
        this.page = 1
        this.lists = []
        this.getlists()
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 500);
    },
    onReachBottom(){
        if(this.page<this.last_page){
            this.page ++ 
            this.getlists()
        }
    },
    onLoad(){},
    onShow(){
        this.$msgNum()
        this.getlists()
    },
    methods:{
        readone(item){
            this.$api.post(`Notice/readone`,{id:item.id}).then((res)=>{
                item.is_read = 1
                this.$msgNum()
                this.$navto(item.app_path)
            })
        },
       getlists(){
           this.$api.get(`Notice/lists?page=${this.page}`).then(({data})=>{
               this.last_page = data.last_page
               this.lists = data.data
           })
       } 
    }
}    
</script>

<style lang="less" scoped>
    .header{
        
        height: 80rpx;
        border-bottom: 1px solid #DCDCDC;
        display: flex;
        align-items: center;
       
        justify-content: space-between;
        .left{
             display: flex;
             align-items: center;
          .red{
              width: 14rpx;
              height: 14rpx;
              background-color: red;
              border-radius: 50%;
              font-weight: bold;
              margin-right: 10rpx;
          }  
        }
        
    }
    .actions{
        text-align: right;
        font-size: 24rpx;
    }
</style>